<template>
    <div class="wrap" id="app2">
        <div class="loginBox">
            <h3>欢迎来到在线实验管理</h3>
            <el-form ref="loginForm" :model="loginForm" class="login-form" :rules="rules" label-width="80px"
                     label-position="left" v-if="!showRegister">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="loginForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="inputCode" style="display: flex;">
                  <el-input name="code" type="text" v-model="inputCode" autoComplete="on" placeholder="验证码" />
                  <div class="code" @click="refreshCode()">
                  <s-identify :identifyCode="identifyCode"></s-identify>
                  </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="handleLogin">登录</el-button>
                </el-form-item>
                 <el-form-item>
                    <el-button type="primary" plain @click="handleRegister">注册</el-button>
                </el-form-item>
            </el-form>

            <el-form label-width="80px" :model="form" v-else>
                <el-form-item label="学号">
                <el-input v-model="form.studentId"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.userPass"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="register">注册</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="handleRegister">返回</el-button>
                </el-form-item>
            </el-form>
            
        </div>

    </div>

</template>

<script>
import SIdentify from '@/components/identify.vue'
import Vue from 'vue'
    export default {
        name: "Login",
        　components: {
      "s-identify": SIdentify,
  },
    data() {
        return {
            loginForm: {},
            rules: {
                name: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]
            },
            identifyCodes: "1234567890",
            identifyCode: "",
            inputCode: "",
            showRegister: false,
            form: {
              userName: '',
              userPass: '',
              studentId: ''
          }
        };
    },
    created() {
        this.openTip();
    },
    mounted() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
    },
    methods: {
        randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        },
        refreshCode() {
          this.identifyCode = "";
          this.makeCode(this.identifyCodes, 4);
        },
        makeCode(o, l) {
          for (let i = 0; i < l; i++) {
            this.identifyCode += this.identifyCodes[
              this.randomNum(0, this.identifyCodes.length)
            ];
          }
          console.log(this.identifyCode);
        },
        handleLogin() {
             if(this.inputCode != this.identifyCode) {
                 alert("请输入正确验证码")
                return
               }
            let url = '/api/user/login?userName=' + this.loginForm.name + '&userPass=' + this.loginForm.password;
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    this.$http.post(url, {}).then(({body}) => {
                        debugger
                        if (body.success === true) {
                            localStorage.isAdmin = false
                            if(body.data.type == 'admin') {
                                localStorage.isAdmin = true
                            }
                            debugger
                            localStorage.username = body.data.userName;
                            localStorage.userId = body.data.userId
                            window.location.href = "/server";
                        } else {
                            this.$message.error(body.message);
                        }

                    }).catch((err) => {
                        console.log(err)
                        this.$message.error('登陆失败')
                    })
                }
            })


        },
        openTip() {
            this.$notify({
                title: '提示',
                message: '不断尝试你就会登录成功！'
            });
        },
        handleRegister() {
            debugger
            this.showRegister = !this.showRegister
            // this.$router.push({path: '/register'})
            // window.location.href = "/register";
        },
        register() {
            let url = '/api/user/save'
            this.$http.post(url,this.form).then(data => {
                if (data.data.success === true) {
                    localStorage.username = data.data.userName;
                    this.showRegister = false
                    this.form= {
                        userName: '',
                        userPass: '',
                        studentId: ''
                    }
                    this.$message.success("注册成功！")
                } else {
                    this.$message.error(data.data.message);
                }
            })
        }
    }
}
</script>
<style src="../../../style/common.scss">

</style>
<style lang="scss">

    .wrap {
        width: 100%;
        height: 100%;
        background: url("../../../assets/img/bg2.jpeg") no-repeat;
        background-size: 100% 100%;

        .loginBox {
            width: 355px;
            height: 330px;
            padding: 40px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: white;
            text-align: center;
            box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
            padding-top: 31px;

            .el-form {
                margin-top: 30px;

                .el-button {
                    width: 100%;
                }
            }
        }
    }

    .el-form-item__content {
        display: flex;
        margin-left: 10px !important;
    }
</style>
